<template>
    <div class="not-found">
        <div class="content">
            <h1>404</h1>
            <h2>页面未找到</h2>
            <p>抱歉，您访问的页面不存在或已被移除</p>
            <a-button type="primary" @click="handleBack">返回首页</a-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const handleBack = () => {
    router.push('/')
}
</script>

<style lang="scss" scoped>
.not-found {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #1a1a1a, #4a4a4a);
    color: #fff;
    overflow: hidden;
    position: relative;

    .content {
        text-align: center;
        z-index: 1;

        h1 {
            font-size: 120px;
            margin: 0;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
        }

        h2 {
            font-size: 32px;
            margin: 0;
            margin-bottom: 20px;
            color: #fff;
        }

        p {
            font-size: 18px;
            margin-bottom: 30px;
            color: #ccc;
        }
    }

}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}
</style>